<template>
  <div class="index_main">
			<div class="btnBox">
          <el-button type="primary" @click="addGoods">配置推荐商家</el-button>
			</div>
			<div class="phone_box">
					<div class="header_img">
						<img src="@/static/phone_top_kyy.png" alt="" />
					</div>
					<div class="ph_main">
							<div class="banner" @click="addBanner">
                <el-carousel height="154px">
                  <el-carousel-item v-for="(item,index) in bannerList" :key="index+'b'">
                      <img  class="bannerImg" :src="item.imgUrl" alt="">
                  </el-carousel-item>
                </el-carousel>
							</div>
							<div class="announcement">
								<img src="@/static/nav_top_kyy.png" alt="">
							</div>

							<div class="baoxiang">
									<div class="chestList">
                    <!--使用draggable组件-->
                    <draggable v-model="punchActivityList"  sort= "false" chosenClass="chosen" forceFallback="true" group="punchActivity" animation="1000" @start="onPunchActivityStart" @end="onPunchActivityEnd">
                        <transition-group>
                          <!-- <div class="item" v-for="element in myArray" :key="element.id">{{element.name}}</div> -->
                          <div class="list" v-for="(item,index) in punchActivityList" :key="index+'p'">
                               <div class="listTop">
                                  <div class="listTopImg">
                                    <img class="lti_img_bg" :src="item.shopIcon ? item.shopIcon : require('@/static/user-ico.png')" alt="">
                                    <!-- <img class="lti_img_icon" src="@/static/insurance_img.png" alt="" > -->
                                  </div>
                                  <div class="listTopContent">
                                     <div class="lt_title">
                                        <div class="lt_title_left">{{item.shopName}}</div>
                                        <div class="lt_title_right" >1km</div>
                                     </div>
                                     <div class="lt_address">{{item.locateAddress}}{{item.address}}</div>
                                     <div class="lt_tap">
                                      <div class="lt_tap lt_tap_FDECE1">{{item.shopTypeParentName}}-{{item.shopTypeName}}</div>
                                      <div class="lt_tap lt_tap_E4EEFF" v-if="item.superviseRatio!=0 && item.superviseRatio!=''&& item.cardInfoList.length > 0 ">{{item.superviseRatio}}%资金监管</div>
                                     </div>
                                    </div>
                               </div>
                               <div class="listLine"></div>
                               <div class="listBottom"> 
                                  <div class="lb_right" >
                                    <img class="lb_right_img" v-if="item.merchantCreditGrade == 'AAA级'" src="@/static/level_aaa.png" alt="">
                                    <img class="lb_right_img" v-else-if="item.merchantCreditGrade == 'AA级'" src="@/static/level_aa.png" alt="">
                                    <img class="lb_right_img" v-else-if="item.merchantCreditGrade == 'A级'" src="@/static/level_a.png" alt="">
                                    <img class="lb_right_img" v-else-if="item.merchantCreditGrade == 'B级'" src="@/static/level_b.png" alt="">
                                    <img class="lb_right_img" v-else-if="item.merchantCreditGrade == 'C级'" src="@/static/level_c.png" alt="">
                                    <span class="lb_right_word">{{item.merchantCreditGrade}}商家</span>
                                  </div>
                                  <!-- <div class="lb_left" v-if="item.cardInfoList && item.cardInfoList.length == 0" style="display: flex;align-items: center;justify-content: center;">
                                    商家暂未进行售卡
                                  </div>
                                   <div class="lb_left" v-for="(mitem,mitemindex) in item.cardInfoList" :key="mitemindex+'c'">
                                      <div class="lb_left_top">
                                        <img class="lb_left_img" src="@/static/butie.png" v-if="mitem.isSubsidy==1" alt="" >
                                        <img class="lb_left_img" src="@/static/card_type.png" v-if="mitem.isSubsidy!=1" alt="" >
                    
                                        <div class="lb_left_word">{{mitem.name}}</div>
                                        <div class="lb_left_price">￥{{mitem.buyMoney}}</div>
                                      </div>
                                      <div class="lb_left_bottom">
                                        <div class="lb_left_name" v-if="mitem.cardType == 2">{{mitem.cardTypeDict}}-{{mitem.usableCount}}次</div>
                                        <div class="lb_left_name" v-else-if="mitem.cardType == 4">{{mitem.cardTypeDict}}-{{mitem.usableCount}}课时</div>
                                        <div class="lb_left_name" v-else-if="mitem.cardType == 6">多店通用</div>
                                        <div class="lb_left_name" v-else-if="mitem.cardType != 2 && mitem.cardType != 4 && mitem.cardType != 6">{{mitem.cardTypeDict}}</div>
                                        <div class="lb_left_line"></div>
                                        <div class="lb_left_info">单项计次卡项目名</div>
                                        <div class="lb_left_info" v-if="mitem.cardType == 1">{{mitem.basePower}}</div>
                                        <div class="lb_left_info" v-if="mitem.cardType == 2">
                                          <span v-for="(citem,cindex) in mitem.projectList" :key="cindex+'c'">{{citem.projectName}}-{{citem.projectNumber}}次<span v-if="mitem.projectList.length > 1 && mitem.projectList.length-1 != cindex">、</span></span>
                                        </div>
                                        <div class="lb_left_info" v-if="mitem.cardType == 3">{{mitem.basePower}}</div>
                                        <div class="lb_left_info" v-if="mitem.cardType == 4"></div>
                                        <div class="lb_left_info" v-if="mitem.cardType == 5"></div>
                                        <div class="lb_left_info" v-if="mitem.cardType == 6">{{mitem.basePower}}</div>
                                        <div class="lb_left_b_price">￥{{mitem.worth}}</div>
                                      </div>
                                  </div> -->
                                  <div class="lb_left">
                                      <div class="lb_left_top">
                                        <img class="lb_left_img" src="@/static/card_type.png"  alt="" >
                                        <div class="lb_left_word">快速洗车打蜡七八次卡</div>
                                        <div class="lb_left_price">￥500</div>
                                      </div>
                                      <div class="lb_left_bottom">
                                         <div class="lb_left_name">计次卡-5次</div>
                                         <div class="lb_left_line"></div>
                                         <div class="lb_left_info">单项计次卡项目名</div>
                                         <div class="lb_left_b_price">￥500</div>
                                      </div>
                                  </div>
                               </div>
                          </div>
      
                        </transition-group>
                    </draggable> 			
									</div>
							</div>

					</div>
			</div>
      <banner-diglog
        v-if="bannerDiglog"
        :pathType="bannerPath"
        :configType="1"
        :visible.sync="bannerDiglog"
        @success="_handleSuccess" 
      />
      <chest-diglog
        v-if="chestDiglog"
        :pathType="punchActivityPath"
        :visible.sync="chestDiglog"
        @success="_handleSuccess" 
      />
  </div>
</template>
<script>
import {
  kyyBannerConfigList,
  merchantShopAllList,
  addMerchantShop,
} from '@/api/clientManagement/businessSetting'
import bannerDiglog from './components/bannerDiglog' 
import chestDiglog from './components/index_main/chestDiglog'
import draggable from 'vuedraggable' //拖动组件

export default {
  name: "shopDetail",
  components: {
    bannerDiglog,
    chestDiglog,
    draggable
  },
  props: {
  },
  data() {
    return {
        bannerDiglog: false,
        chestDiglog: false,
        bannerPath: 'add', 
        bannerList: [],//轮播图列表
        punchActivityList: [],//配置推荐商家
        punchActivityPath: 'add',
    };
  },
  watch: {
    
  },
  created() {
    this.getbannerList()
    this.getPunchActivityList()
  },
  mounted() {
  
  },
  methods: {
    //获取轮播图 	广告配置类型 1-首页 2-领券中心
    getbannerList(){
      kyyBannerConfigList(1).then((res) => {
        this.bannerList = res.result
      })
    },
    //获取配置推荐商家
    getPunchActivityList(){
      merchantShopAllList().then(res => {
        this.punchActivityList = res.result
      })
    },
    //添加轮播图
    addBanner(){
      this.bannerDiglog = true
      if(this.bannerList.length > 0){
        this.bannerPath = 'edit'
      }else{
        this.bannerPath = 'add'
      }
    },
    //新增宝箱商品
    addGoods(){
      this.chestDiglog = true
      if(this.punchActivityList.length > 0){
        this.punchActivityPath = 'edit'
      }else{
        this.punchActivityPath = 'add'
      }
    },
    _handleSuccess(){
      this.getbannerList()
      this.getPunchActivityList()
    },

    //开始拖拽事件
    onPunchActivityStart(){
      this.drag = true;
    },
    //拖拽结束事件
    onPunchActivityEnd() {
      this.drag = false
      console.log('punchActivityList',this.punchActivityList)
      // editPunchActivitySort
      var list = []
      this.punchActivityList.forEach(item => {
        list.push(item.shopId)
      })
      
      addMerchantShop({shopIdList:list}).then(res => {})
    },
  },
};
</script>
<style lang="scss" scoped>
.phone_box{
	width: 395px;
	min-height: 1000px;
	border-radius: 30px;
	border: 10px solid #333;
	margin: 40px 200px 0 100px;
	background: #fff;
	box-sizing: border-box;
}
.header_img{
	width: 100%;
	
	img{
		width: 100%;
		border-top-left-radius : 30px;
		border-top-right-radius : 30px;
	}
}
.ph_main{
	padding: 10px 0;
	.banner{
		width: 345px;
		height: 154px;
		border-radius: 10px;
		background: #333;
		color: #fff;
		margin: 0 auto;
    cursor: pointer;
	}
  .bannerImg{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit:cover;
  }
}
.announcement{
	margin-top: 10px;
	widows: 100%;
  background: #f6f6f6;
	img{
		width: 100%;
	}
}


.baoxiang{
	margin-bottom: 10px;
  background: #f6f6f6;
	.chestList{
		display: flex;
		flex-direction: column;
		align-items: center;
		.list{
			width: 343px;
      background: #fff;
      margin-bottom: 15px;
      .listTop{
        width: 100%;
        display: flex;
        flex-direction: row;
        padding: 16px 16px 12px 12px;
        box-sizing: border-box;
        .listTopImg{
          position: relative;
          width: 65px;
          height: 65px;
          border-radius: 4px;
          margin-right: 12px;
          .lti_img_bg{
           width: 65px;
           height: 65px;
           border-radius: 4px;
          }
          .lti_img_icon{
            position: absolute;
            width: 27px;
            height: 34px;
            left: -5px;
            top: -7px;
            // background: #518CFF;
          }
        }
        .listTopContent{
          flex: 1;
          .lt_title{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2px;
            .lt_title_left{
              width: 181px;
              font-family: PingFang SC;
              font-size: 15px;
              font-weight: 700;
              line-height: 21px;
              color:#2C2A2F;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .lt_title_right{
              font-size: 13px;
              font-weight: 400;
              color:#838285;
            }
          }
          .lt_address{
            width: 181px;
            font-size: 13px;
            font-weight: 400;
            line-height: 18px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 5px;
          }
          .lt_tap{
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 0 3px;
            font-size: 12px;
            font-weight: 400;
            line-height: 17px;
            margin-right: 9px;
          }
          .lt_tap_FDECE1{
            background: #FDECE1;
            color: #FD6504;
          }
          .lt_tap_E4EEFF{
            background: #E4EEFF;
            color: #518CFF;
          }
        }
      }
      .listLine{
        margin: 0 16px 0 12px;
        border-bottom: 0.5px solid #DADADA;
      }
      .listBottom{
          padding: 12px 16px 15px 19px;
          box-sizing: border-box;
          display: flex;
          flex-direction: row;
        .lb_right{
          display: flex;
          align-items: center;
          flex-direction: column;
          margin-right: 19px;
          .lb_right_img{
            width: 50px;
            height: 27px;
          }
          .lb_right_word{
            font-size: 10px;
            font-weight: 400;
            line-height: 14px;
            margin-top: 3px;
          }
        }
        .lb_left{
           flex: 1;
           display: flex;
           flex-direction: column;
          .lb_left_top{
              display: flex;
              flex-direction: row;
              align-items: center;
              margin-bottom: 7px;
            .lb_left_img{
              width: 19px;
              height: 13px;
              margin-right: 8px;
            }
            .lb_left_word{
              width: 145px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 14px;
              font-weight: 400;
              line-height: 20px;
            }
            .lb_left_price{
              flex: 1;
              text-align: right;
              font-size: 16px;
              font-weight: 400;
              line-height: 22px;
              color: #FF611D;
            }
          }
          .lb_left_bottom{
              display: flex;
              flex-direction: row;
              align-items: center;
              .lb_left_name{
                font-size: 12px;
                font-weight: 400;
                line-height: 17px;
                color: #838285;
              }
              .lb_left_line{
                height: 13px;
                border-right: 1px solid #C1C0C3;
                margin: 0 8px;
              }
              .lb_left_info{
                flex: 1;
                font-size: 12px;
                font-weight: 400;
                line-height: 17px;
                width: 110px;
                color: #FC8903;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .lb_left_b_price{
                margin-left: 10px;
                text-align: right;
                color: #B2B2B4;
                font-size: 12px;
                font-weight: 400;
                line-height: 17px;
                text-decoration-line: line-through;
              }
          }
        }
      }

		}
	}
}
</style>
